<template>
  <DataCard title="合同概览" icon="📊" :loading="loading">
    <div class="contract-stats">
      <div class="stat-item" v-for="stat in stats" :key="stat.label">
        <div class="stat-value">{{ stat.value }}</div>
        <div class="stat-label">{{ stat.label }}</div>
      </div>
    </div>
    <ChartWrapper :options="chartOptions" />
  </DataCard>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { EChartsOption } from 'echarts'
import type { ContractOverviewProps } from '@/types'
import DataCard from './DataCard.vue'
import ChartWrapper from './ChartWrapper.vue'

const props = defineProps<ContractOverviewProps>()
const loading = computed(() => props.contracts.length === 0)

const stats = computed(() => [
  { label: '总合同数', value: props.contracts.length },
  { label: '活跃合同', value: props.contracts.filter(c => c.status === 'active').length },
  { label: '总金额', value: `¥${(props.contracts.reduce((sum, c) => sum + c.amount, 0) / 10000).toFixed(1)}万` }
])

const chartOptions = computed<EChartsOption>(() => ({
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 10,
      borderColor: '#0a0e27',
      borderWidth: 2
    },
    label: { show: false },
    emphasis: {
      label: { show: true, fontSize: 16, fontWeight: 'bold' }
    },
    data: [
      { value: props.contracts.filter(c => c.status === 'active').length, name: '活跃' },
      { value: props.contracts.filter(c => c.status === 'pending').length, name: '待定' },
      { value: props.contracts.filter(c => c.status === 'completed').length, name: '完成' }
    ]
  }]
}))
</script>

<style lang="scss" scoped>
.contract-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background: rgba(0, 243, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 243, 255, 0.2);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
</style>
